<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>

        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.js"></script>

    </head>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 1920px;
            height: 1080px;
        }
        img{
            margin: 0;
            padding: 0;
        }
        p{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 100%;
            height: 100%;
            overflow: auto;
            background-image: url("../potato/img_bg_01.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .potato-header{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            background: url("../potato/tab_bg_big.png") no-repeat center center;
            background-size: 100% 100%;
            margin-top: 20px;
        }
        .potato-header-text{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: bolder;
            color: #fff;
        }
        .potato-header-text img{
            display: inline-block;
            width: 40px;
            height: auto;
            margin-right: 10px;
        }
        .content-current-box{
            /*width: 100%;*/
            padding: 0 20px;
            margin: 27px 0 33px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
        }
        .video-box{
            width: 800px;
            margin: 0 30px;
            height: 500px;
            background: url("../potato/vidio-bg.png") center center no-repeat;
            background-size: 100% 100%;
        }
        .center-txt-box{
            flex: 1;
            height: 500px;
            padding: 20px 10px;
            box-sizing: border-box;
            background: url("../potato/border_left_01.png") center center no-repeat;
            background-size: 100% 100%;
        }
        .current-title{
            margin-top: 22px;
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            background-size: 78% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: url("../potato/tab_01.png");
        }
        .brandStory-text{
            margin: 20px 10px 10px;
            font-size: 14px;
            color: #BBDAFF;
            line-height: 26px;
            height: calc(100% - 60px);
            overflow-y: auto;
        }
        .brandStory-text p{
            line-height: 26px;
        }
        .brandStory-img{
            float: right;
            clear: both;
        }
        .brandStory-img-potato{
            width: 230px;
            height: 230px;
            border: 1px solid #1111bf;
            margin-left: 20px;
        }
        .brandStory-img-potato img{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .brandStory-text-two{
            margin-top: 10px;
        }
        .potato-type-allBox{
            margin-bottom: 0;
            margin-top: 33px;
        }
        .potato-type-box{
            flex: 1;
            box-sizing: border-box;
            padding: 10px;
            height: 430px;
            overflow: hidden;
            margin-right: 18px;
            background: url("../potato/border_down_01.png") center center no-repeat;
            background-size: 100% 100%;
        }
        .potato-type-box:last-child{
            margin-right: 0;
        }
        .potato-type-img{
            display: inline-block;
            width: 100%;
            margin: 20px 0 4px;
        }
        .potato-type-text{
            color: #BBDAFF;
            font-size: 12px;
            line-height: 22px;
        }
        .base-video-btn{
            background-color: rgba(0,0,0,0);
            background-image: url("../potato/btn_default.png");
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border: none;
            margin-top: 30px;
            margin-left: 22px;
            color: #00E4FF;
            padding: 12px 30px 12px 20px;
        }
        .base-video-btn:hover,.base-video-btn:active{
            background-color: rgba(0,0,0,0);
            background-image: url("../potato/btn_default.png");
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: #00E4FF;
        }
        .base-video-box{
            display: block;
            height: 380px;
        }
        .base-video-allBox{
            margin: 20px;
            width: calc(100% - 60px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-dropdown-menu{
            background-color: #008AFF;
        }
        .el-dropdown-menu__item{
            color: #FBFFFF;
        }
        .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
            color: #FBFFFF;
            background-color: #014396;
        }
        .el-popper[x-placement^=bottom] .popper__arrow{
            top: -7px;
        }
        .brandStory-img-ewm{
            margin-left: 40px;
        }
    </style>
    <body>
        <div id="content">
            <div class="potato-header">
                <div class="potato-header-text"><img src="../potato/logo_01.png">{{ headTxt }}</div>
            </div>
            <div class="content-current-box">
                <div class="center-txt-box">
                    <div class="current-title">巫溪洋芋品牌故事</div>
                    <div class="brandStory-text">
                        <p v-html="brandStoryTxtTitle"></p>
                        <p v-html="brandStoryTxtOne" style="margin-top: 10px"></p>
                        <div class="brandStory-text-two">
                            <div class="brandStory-img brandStory-img-ewm" align="center">
                                <img src="../potato/ewm.jpg" width="120" alt="" hspace="8"><br />扫一扫追溯查询
                            </div>
                            {{ brandStoryTxtTwo }}
                        </div>
                    </div>
                </div>
                <div class="video-box">
                    <el-dropdown trigger="click">
                        <div class="base-video-btn">
                            基地视频
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,index) in baseVideoList">{{ item.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="base-video-allBox">
                        <video src="../potato/potato-vidio.mp4" controls="controls" class="base-video-box">
                            您的浏览器不支持 video 标签。
                        </video>
                    </div>
                </div>
                <div class="center-txt-box">
                    <div class="current-title">米粒（香糯口感好）</div>
                    <div class="brandStory-text">
                        <p v-html="riceGrainsTxtOne"></p>
                        <div class="brandStory-text-two" style="margin-top: 0">
                            <div class="brandStory-img brandStory-img-potato" align="center">
                                <img src="../potato/potato1.png" alt="" hspace="8">
                            </div>
                            {{ riceGrainsTxtTwo }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-current-box potato-type-allBox">
                <div class="potato-type-box">
                    <div class="current-title">冀张薯12号（高产、适宜套作）</div>
                    <img src="../potato/potato2.png" class="potato-type-img">
                    <p class="potato-type-text">冀张薯12号是河北省高寒作物研究所用大西洋/99-6～36选育的中晚熟鲜食品种。株高69cm，茎绿色，叶色
                        绿色，花冠浅紫色，单株结薯数5.2块。块茎：薯块长圆形，淡黄皮白肉，芽眼浅。Vc 17.9mg/100g，淀
                        粉13.2%，干物质20.6%，粗蛋白2.05%，还原糖0.82%。中抗马铃薯Y病毒病(25.9MR），中抗马铃薯X病毒
                        病(26.8MR);河北农业大学植保学院抗性鉴定，中感晚疫病。适宜地区：内蒙古自治区、西南地区马铃薯种植区种植。</p>
                </div>
                <div class="potato-type-box">
                    <div class="current-title">米粒（香糯口感好）</div>
                    <img src="../potato/potato3.png" class="potato-type-img">
                    <p class="potato-type-text">兴佳2号是黑龙江省大兴安岭地区农业林业科学院选育的优良马铃薯品种，该品种生育期87天左右，属早
                        中熟品种。株形直立，株高60～70厘米，茎秆粗壮，叶片深绿色，花冠白色。薯块椭圆形，表皮光滑、
                        黄色，芽眼深度浅，薯肉淡黄色，大、中薯率在85％以上，耐储性强。薯块干物质含量20.1％，淀粉含
                        量12％～15％，食味好，适宜鲜食及淀粉加工。抗晚疫病，耐湿性好，较耐寒。丰产性好，一般亩产20
                        00公斤，高产地块可达3500公斤以上。</p>
                </div>
                <div class="potato-type-box">
                    <div class="current-title">米粒（香糯口感好）</div>
                    <img src="../potato/potato4.png" class="potato-type-img">
                    <p class="potato-type-text">青薯9号来自青海省农林科学院，晚熟鲜食品种，生育期115天左右。株高89.3厘米左右，植株直立，分
                        枝多，生长势强，枝叶繁茂，茎绿色带褐色，基部紫褐色，叶深绿色，复叶挺拔、大小中等，叶缘平
                        展，花冠紫色，天然结实少。结薯集中，块茎长圆形，红皮黄肉，成熟后表皮有网纹、沿维管束有红
                        纹，芽眼少而浅。区试单株主茎数2.9个，结薯5.2个，单薯重95.9克，商品薯率77.1%。植株中抗马
                        铃薯X病毒，抗马铃薯Y病毒，抗晚疫病。淀粉含量15.1%，干物质含量23.6%，还原糖含量0.19%，粗
                        蛋白含量2.08%，维生素C含量18.6毫克/100克鲜薯。适合西南地区中高海拔地区种植。</p>
                </div>
                <div class="potato-type-box">
                    <div class="current-title">米粒（香糯口感好）</div>
                    <img src="../potato/potato5.png" class="potato-type-img">
                    <p class="potato-type-text">费乌瑞它别名荷兰15号，是由农业部种子局从荷兰引进的马铃薯品种。早熟品种，生育期从出苗到成熟6
                        5天左右。块茎长椭圆形，皮黄色肉鲜黄色，表皮光滑，块茎大而整齐，芽眼少而浅，块茎对光敏感，
                        亩产2000-2300kg左右，适合内蒙古、辽宁、广东、福建和广大的中原二作区及西南作区种植。</p>
                </div>
                <div class="potato-type-box">
                    <div class="current-title">米粒（香糯口感好）</div>
                    <img src="../potato/potato6.png" class="potato-type-img">
                    <p class="potato-type-text">中薯5号早熟品种，出苗后生育期67天左右，常温条件下块茎休眠期50天左右。块茎略扁长圆形、圆形，
                        大而整齐，淡黄皮（偏白）淡黄肉，表皮光滑，商品薯率70%左右，芽眼极浅，结薯集中，平均亩产18
                        00kg。适宜北京、山东、河南等中原二季作区春秋两季种植，辽宁、黑龙江等北方一季作区早熟栽培，
                        广东、广西、江西、福建等南方冬作区冬季栽培，重庆等西南地区二季栽培,注意防治晚疫病。</p>
                </div>
            </div>
        </div>
    </body>

</html>
<script>
    var content=new Vue({
        el: '#content',
        data(){
            return {
                headTxt: '巫溪洋芋品种介绍',
                brandStoryTxtTitle: '巫溪-----中国绿色生态马铃薯之乡',
                brandStoryTxtOne: '巫溪县地处渝陕鄂三省(市)结合部,境内耕地广袤、生态优良、资源富集。特殊土壤类型、典型山区立体气候粲件以及先进' +
                    '栽培管理,共同造就了巫溪洋芋独特的品质特征。同时也让巫溪县成为洋芋生产最适宜区域、绿色生态洋芋生产的最佳区域。' +
                    '发展至今,巫溪洋芋已获得国家地理标志农产品,成为巫溪县第一大农产品。巫溪洋芋独特的口感和营养成分深受消费者青睐,' +
                    '社会口碑较好,先后获得“重庆特产名片″、“重庆名牌农产品〃、“首批中欧互认农产品″等荣營。',
                brandStoryTxtTwo: '巫溪县薯光农业科技开发有限公司2021' +
                    '年主要生产的脱毒马铃薯品种有费乌瑞' +
                    '它、中薯5号、冀张薯12号、兴佳2号、' +
                    '青薯9号、米拉。其中冀张薯12号获得' +
                    '了品种授权，其他几个品种不在登记保' +
                    '护的品种范畴，级别有原原种、原种。',
                brandStory: '品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌' +
                    '故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事品牌故事',
                riceGrainsTxtOne: '拉又称马尔科，德国引进，中晚熟品种，生育期从出苗到成熟100天左右。株型开展，分枝数中等，株高60cm，茎绿色基部带紫色，生长势较强，叶绿色。茸毛中等，花序总梗绿色，花柄节无色，花冠白色，天然结实性弱，浆果绿色、小，有种子。块茎长筒形，皮黄肉黄，表皮较光滑，但顶部较粗糙，芽眼较多，深度中等，块茎大小中等，结薯较分散，休眠期长，耐贮藏。块茎干物质含量25.6%，淀粉含量' ,
                riceGrainsTxtTwo: '17.5%-18.2%，还原糖含' +
                    '量0.25%,粗蛋白含量1.1%，' +
                    '维生素C含量10.4mg/100g' +
                    '鲜薯。抗晚疫病、高抗癌' +
                    '肿病，不抗粉痂病，轻感' +
                    '卷叶病和花叶病。适于无' +
                    '霜期较长、雨多湿度大、' +
                    '晚疫病易流行的西南作区。',
                baseVideoList: [
                    {
                        name: '基地一',
                        url: ''
                    },{
                        name: '基地二',
                        url: ''
                    },{
                        name: '基地三',
                        url: ''
                    },{
                        name: '基地四',
                        url: ''
                    },{
                        name: '基地五',
                        url: ''
                    }
                ]
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){

        },
        methods:{

        }
    })
</script>
